<script setup>
import { Icon } from '@iconify/vue'

const props = defineProps({
  icon: String,
  color: String,
  size: {
    type: Number,
    default: 18
  },
  depth: {
    type: Number,
    default: 1
  }
})

const isLocal = computed(() => {
  return props.icon && props.icon.startsWith('local:')
})

// 获取本地图标的函数
function getLocalIcon(icon) {
  const svgName = icon.replace('local:', '')
  const svg = import.meta.glob('@/assets/svg-icons/*.svg', {
    query: '?raw',
    import: 'default',
    eager: true
  })
  return svg[`/src/assets/svg-icons/${svgName}.svg`]
}
</script>

<template>
  <n-icon v-if="props.icon && !isLocal" :size="props.size" :depth="props.depth" :color="props.color">
    <Icon :icon="props.icon" />
  </n-icon>
  <n-icon v-if="props.icon && isLocal" :size="props.size" :depth="props.depth" :color="props.color" v-html="getLocalIcon(props.icon)" />
</template>
